<template>
	<view class="page-cont" :style="themeStore.theme">
		<view class="device-list">
			<view :class="['device-item', item.alarm ? 'device-item-alarm' : '']" v-for="(item, index) in deviceList" :key="index" @click="handleDetailClick(item)">
				<view class="device-item-header">
					<view class="device-item-name">{{item.name}}</view>
					<image class="device-item-arrow" src="/static/right_arrow.png"></image>
					<view :class="['device-item-status', item.alarm ? 'device-item-status-alarm' : '']"></view>
				</view>
				<view class="device-item-top">
					<view :class="['iconfont icon-ysj', channelItem.status == 1 ? 'device-status-start' : 'device-status-stop']" v-for="(channelItem, channelIndex) in item.channel"
						:key="channelIndex"></view>
				</view>
				<view class="device-item-bottom">
					<view class="device-item-box" v-for="(configItem, configIndex) in item.config" :key="configIndex">
						<view class="device-item-box-num">{{configItem.num}}{{configItem.unit}}</view>
						<view class="device-item-box-name">{{configItem.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, watch, onMounted } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { storeToRefs } from 'pinia';
	import { getProjectList, getProjectModel, getProjectMonitor, getProjectAlarm } from "@/api/home.js";
	import useHomeStore from '@/store/home';
	import useThemeStore from '@/store/theme';
	import itemVue from '../../energy/item.vue';
	const themeStore = useThemeStore();
	const homeStore = useHomeStore();
	const { projectId, projectName, projectType, projectModus, deviceList } = storeToRefs(homeStore);
	const props = defineProps({
		alarmList: Array
	});

	onMounted(() => {
		initData();
	});


	// onShow(() => {
	// 	initData();
	// });

	// 获取项目的模块数据
	async function initData() {
		let list = projectModus.value["40"];
		// 机组
		let child = projectModus.value["41"];
		let typeArr = [
			{ type: '0', name: '吸气压力', key: '0', unit: 'bar' },
			{ type: '1', name: '排气压力', key: '1', unit: 'bar' },
			{ type: '2', name: '目标压力', key: '2', unit: 'bar' },
			{ type: '3', name: '吸气温度', key: '3', unit: '℃' },
			{ type: '4', name: '排气温度', key: '4', unit: '℃' },
			{ type: '5', name: '目标温度', key: '5', unit: '℃' },
			{ type: '6', name: '冷凝温度', key: '6', unit: '℃' },
			{ type: '7', name: '蒸发温度', key: '7', unit: '℃' },
			{ type: '8', name: '过冷温度', key: '8', unit: '℃' },
			{ type: '9', name: '供油温度', key: '9', unit: '℃' },
			{ type: '10', name: '油分温度', key: '10', unit: '℃' },
			{ type: '11', name: '油分加热', key: '11', unit: '' },
			{ type: '12', name: '吸气过热度', key: '12', unit: 'K' },
			{ type: '13', name: '油路旁通电磁阀', key: '13', unit: '', status: 'area' },
			{ type: '14', name: '供液允许输出信号', key: '14', unit: '', status: 'area' },
			{ type: '15', name: '远程启动停止信号', key: '15', unit: '', status: 'area' },
			{ type: '16', name: '排气过热度', key: '12', unit: 'K' },
			{ type: '17', name: '供油压力', key: '17', unit: 'bar' },
			{ type: '18', name: '进水温度', key: '18', unit: 'ml' },
			{ type: '19', name: '出水温度', key: '19', unit: 'ml' },
			{ type: '20', name: '排气过热度', key: '20', unit: 'K', g: 1 },
			{ type: '21', name: '供液温度', key: '21', unit: '℃' },
			{ type: '22', name: '电流', key: '22', unit: 'A' },
			{ type: '23', name: '低压压力-中温', key: '23', unit: 'bar' },
			{ type: '24', name: '吸气温度-中温', key: '24', unit: '℃' },];
		let alarmIds = props.alarmList.map(element => {
			return element["oid"];
		});
		for (let i = 0, leni = list.length; i < leni; i++) {
			let item1 = list[i];
			let datamapping = JSON.parse(item1.datamapping || "");
			let configData = await getData(datamapping);
			let channelList = [];
			let configList = [];
			// 判断当前设备是否预警
			if (alarmIds.indexOf(item1.id) !== -1) {
				item1.alarm = true;
			} else {
				item1.alarm = false;
			}
			datamapping.forEach(item2 => {
				let arr = (item2 || "").split("_");
				let type = arr[arr.length - 1];
				let index = typeArr.findIndex(item3 => item3.type == type);
				configList.push({
					"name": typeArr[index].name,
					"unit": typeArr[index].unit,
					"num": configData[item2] || 0,
				});
			});

			for (let j = 0, lenj = child.length; j < lenj; j++) {
				let channelItem = child[j];
				if (item1.id == channelItem.pid) {
					let key = `41_0_${channelItem.id}_0`;
					// 压缩机：运行状态
					let channelData = await getData([key]);
					channelItem.status = channelData[key];
					channelList.push(channelItem);
				}
			}
			item1.channel = channelList;
			item1.config = configList;
		}
		console.log("list ",list)
		homeStore.setDeviceList(list);//保存设备列表
	}

	// 获取设备数据
	function getData(keys) {
		return new Promise(resolve => {
			getProjectMonitor({ keys: keys }).then(res => {
				resolve(res)
			});
		});
	}

	// 详情
	function handleDetailClick(e) {
		homeStore.setDeviceId(e.id);//保存设备id
		homeStore.setDeviceName(e.name);//保存设备名称
		uni.navigateTo({
			url: `/pages/home/coldroom`,
		});
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		position: relative;

		.device-list {
			margin-top: 5px;
			padding: 0 15px 15px;
			box-sizing: border-box;

			.device-item {
				margin-top: 10px;
				padding: 10px;
				border-radius: 5px;
				background: linear-gradient(180deg, rgba(238, 240, 249, 1), #fff);
				border: 1px solid #fff;
				box-shadow: 0px 10px 20px 0px rgba(95, 131, 249, 0.1);
				box-sizing: border-box;

				&:first-child {
					margin-top: 0;
				}

				&.device-item-alarm {
					border-color: #FC4A2E;
					background: linear-gradient(180deg, #F9F1F0, #fff);
				}
			}

			.device-item-header {
				position: relative;
				padding-right: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.device-item-name {
					color: #333;
					font-size: 13px;
					font-weight: 600;
				}

				.device-item-arrow {
					width: 15px;
					height: 14px;
				}

				.device-item-status {
					position: absolute;
					top: 0;
					right: 0;
					width: 8px;
					height: 8px;
					border-radius: 4px;
					background-color: #75E0A8;

					&.device-item-status-alarm {
						background-color: #FC4A2E;
					}
				}
			}

			.device-item-top {
				position: relative;
				margin-top: 7px;
				display: flex;

				.icon-ysj {
					margin-left: 10px;
					color: $theme-color;
					font-size: 20px;

					&:first-child {
						margin-left: 0;
					}
				}

				.device-status-start {
					color: $theme-color;
				}

				.device-status-stop {
					color: #9CA4B8;
				}
			}

			.device-item-bottom {
				margin-top: 15px;
				display: flex;
				flex-wrap: wrap;

				.device-item-box {
					width: 33.33%;
					text-align: center;

					&:nth-child(n + 4) {
						margin-top: 10px;
					}
				}

				.device-item-box-num {
					color: $theme-color;
					font-size: 14px;
					line-height: 1;
					font-weight: 600;
					word-break: break-all;
				}

				.device-item-box-name {
					padding-top: 5px;
					color: #8A95A0;
					font-size: 11px;
					word-break: break-all;
				}
			}
		}
	}
</style>